<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="email=no" />
    <title>个人消费分期</title>
    <script rel="stylesheet" src="js/plugins/publicUp.js"></script>
    <link rel="stylesheet" href="stylesheets/allCount.css">
    <style type="text/css">
        #conTest{
            width:100%;height:100%;background:#fff;
            font-family: PingFang-SC-Regular;
        }
        .c-title{
            line-height:0.88rem;
            text-align:center;
            color:#405c5b;
        }
        .money{width:2.8rem;margin:0 auto;line-height:1.1rem; font-size:0.90rem;text-align:center; border-bottom:1px dashed #eef1f6; color:#fe7001;}
        .activeBox{width:100%;height:0.9rem;position:relative;overflow:hidden;}
        #chooseBar{position:absolute;left:50%;margin-left:-1px;top:0;display:block;width:2px;height:100%;background:#fe7001; z-index:100;}
        .limitMoney{line-height:0.6rem;text-align:center;}
        #dividingRule{position:absolute;left:0;top:0; width:21rem;height:100%;}
        .rulerMark{position:absolute;left:3.15rem;top:0.2rem;display:block;line-height:0.24rem;width:1.2rem;text-align:center; font-size:0.20rem;}
        .rulerMark1{left:4.15rem;}
        .rulerMark2{left:6.65rem;}
        .rulerMark3{left:9.15rem;}
        .rulerMark4{left:11.65rem;}
        .rulerMark5{left:14.15rem;}
        .rulerMark6{left:16.65rem;}
        .rulerMark7{left:19.15rem;}

        .ct-con2 .c-title{line-height:0.6rem;}
        .count{width:2.8rem;margin:0 auto;line-height:0.7rem; font-size:0.60rem;text-align:center;  color:#508cee;}
        .countBar{position:relative;margin-top:0.4rem;height:2px;width:100%;background:#d4d5d6; }
        .countPoint{width:20%;height:0.6rem;position:absolute;left:10%;margin-left:-10%;}
        .countPoint:before{position:absolute;right:0;top:0;content:"";display:block;width:100%;height:2px;background:#d4d5d6;}
        .countPointActive:before{background:#508cee;}
        .countPoint2{left:30%;}
        .countPoint3{left:50%;}
        .countPoint4{left:70%;}
        .countPoint5{left:90%;}
        .countPoint i{position:absolute;left:50%;margin-left:-4px;top:-3px;display:block;width:6px;height:6px;background:#d4d5d6;border:1px solid #a5a8af;border-radius:50%;}
        .countPoint span{display:block;margin-top:0.25rem;line-height:0.4rem;text-align:center;font-size:0.20rem;}
        .countPoint_checked span{color:#616673;}
        #choosePoint{position:absolute;top:-0.16rem;margin-left:-0.2rem;width:0.32rem;height:0.32rem;background:#73a5f7;border:0.04rem solid #508cee;border-radius:50%;z-index:10


    </style>
</head>
<body>
    <div id="conTest">
        <div class="ct-con1">
            <p class="c-title">我要借(元)</p>
            <p class="money">10000</p>
            <div class="activeBox" id="activeBox">
                <span id="chooseBar"></span>
                <p class="dividingRule" id="dividingRule">
                    <canvas id="ruleEle"></canvas>
                    <span class="rulerMark">3000</span>
                    <span class="rulerMark rulerMark1">5000</span>
                    <span class="rulerMark rulerMark2">10000</span>
                    <span class="rulerMark rulerMark3">15000</span>
                    <span class="rulerMark rulerMark4">20000</span>
                    <span class="rulerMark rulerMark5">25000</span>
                    <span class="rulerMark rulerMark6">30000</span>
                </p>
            </div>
            <p class="limitMoney">(您最高可借<span id="limitNum">50000</span>元)</p>
        </div>
        <div class="ct-con2">
            <p class="c-title">选择分期</p>
            <p id="realCount" class="count">12期</p>
            <div class="countBar">
                <p id="choosePoint" style="left:70%;"></p>
               <p class="countPoint countPointActive"><i></i><span>3期</span></p>
               <p class="countPoint countPoint2 countPointActive"><i></i><span>6期</span></p>
               <p class="countPoint countPoint3 countPointActive"><i></i><span>9期</span></p>
               <p class="countPoint countPoint4 countPointActive"><i></i><span>12期</span></p>
               <p class="countPoint countPoint5"><i></i><span>18期</span></p>
            </div>
        </div>
    </div>
    <script src="js/plugins/jquery-3.2.1.min.js"></script>
    <script src="js/plugins/layer.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".countPoint").on("click",function(){
                if($(this).hasClass("countPointActive")){
                    console.log(window.getComputedStyle($(this).get(0) , null)['left']);
                    $("#choosePoint").get(0).style.left = window.getComputedStyle($(this).get(0) , null)['left'];
                    $(this).addClass("countPoint_checked").siblings().removeClass("countPoint_checked");
                    $("#realCount").html($(this).find("span").html());
                } else {
                    layerInfo("您的借款金额不支持此分期数！");
                }
            });

            var rulerBoxEle = document.querySelector("#dividingRule");
            var activeBoxEle = document.querySelector("#activeBox");
            var rulerEle = document.querySelector("#ruleEle");
            var r_ctx = rulerEle.getContext("2d");
            var basicWidth = activeBoxEle.offsetWidth; // 屏幕宽度

            rulerEle.height = rulerBoxEle.offsetHeight; // 标尺高度
            rulerEle.width = rulerBoxEle.offsetWidth;   // 标尺宽度
            var M_LENGTH = (30000 - 3000) / 1000 ;      // 份数（刻度使用）
            var rulerLength = rulerBoxEle.offsetWidth - basicWidth; // 标尺长度
            var per_realWidth = rulerLength / (M_LENGTH ); // 每份宽度
            console.log(rulerBoxEle.offsetWidth);
            console.log(basicWidth);
            console.log(per_realWidth);
            console.log(M_LENGTH);
            // r_ctx.beginPath();
            // r_ctx.moveTo(basicWidth / 2 , rulerEle.height);
            // // r_ctx.lineTo(rulerEle.width - basicWidth / 2 , rulerEle.height);
            // r_ctx.lineTo(basicWidth / 2  , rulerEle.height / 2);
            // r_ctx.lineWidth = 2;
            // r_ctx.strokeStyle = '#508cee';
            // r_ctx.stroke();
            // r_ctx.closePath();

            drawRuler(0);

            // for(var i=0;i<=M_LENGTH;i++){
            //     r_ctx.beginPath();
            //     r_ctx.moveTo(basicWidth / 2 + i * per_realWidth , rulerEle.height);
            //     r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height);
            //     if(i%5 === 2){
            //         r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height / 2);
            //     } else {
            //         r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height / 1.5);
            //     }
            //     r_ctx.lineWidth = 2;
            //     r_ctx.strokeStyle = '#d4d5d6';
            //     r_ctx.stroke();
            //     r_ctx.closePath();
            // }

            var last_left = per_realWidth;
            var last_right = 0 -last_left - rulerLength;
            console.log(last_left , last_right);
            var flag = false ,
                cur = {
                    x : 0 ,
                    y : 0
                } ,
                nx = null ,
                dx = null,
                x = null;
            rulerBoxEle.ontouchstart = function(e){
                console.log(e.touches[0]);
                var touch = e.touches[0];
                flag = true;
                cur.x = touch.clientX;
                dx = this.offsetLeft;
                console.log(dx);
            };
            rulerBoxEle.ontouchmove = function(e){
                var touch = e.touches[0];
                if(flag){
                    nx = touch.clientX - cur.x;
                    x = dx + nx;
                    console.log(x);
                    if(x > last_right &&  x <= last_left){
                        this.style.left = x + 'px';
                    }
                    document.addEventListener("touchmove",function(evt){
                        evt.preventDefault();
                    },false);
                }
            };
            rulerBoxEle.ontouchend = function(){
                flag = false;
                var _index = Math.floor(Math.abs(x) / per_realWidth);
                console.log(_index);
                console.log(Math.abs(x) % per_realWidth);
                if(Math.abs(x % per_realWidth) > per_realWidth / 2){
                    _index = _index +1;
                }
                if(x > 0){
                    this.style.left = _index * per_realWidth + 'px';
                } else {
                    this.style.left = (0 - _index * per_realWidth) + 'px';
                }
                drawRuler(Math.abs(_index));
            };


            // 绘制标尺
            function drawRuler(num){
                r_ctx.clearRect(0 , 0, rulerEle.width,rulerEle.height);
                r_ctx.beginPath();
                r_ctx.moveTo(basicWidth / 2 , rulerEle.height);
                // r_ctx.lineTo(rulerEle.width - basicWidth / 2 , rulerEle.height);
                r_ctx.lineTo(basicWidth / 2  , rulerEle.height / 2);
                r_ctx.lineWidth = 2;
                r_ctx.strokeStyle = '#508cee';
                r_ctx.stroke();
                r_ctx.closePath();
                for(var i=0;i<=num;i++){
                    if(num !== 0){
                        r_ctx.beginPath();
                        r_ctx.moveTo(basicWidth / 2 + i * per_realWidth , rulerEle.height);
                        r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height);
                        if(i%5 === 2){
                            r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height / 2);
                        } else {
                            r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height / 1.5);
                        }
                        r_ctx.lineWidth = 2;
                        r_ctx.strokeStyle = '#508cee';
                        r_ctx.stroke();
                        r_ctx.closePath();
                    }
                }
                for(var i=num;i<=M_LENGTH - num;i++){
                    r_ctx.beginPath();
                    r_ctx.moveTo(basicWidth / 2 + i * per_realWidth , rulerEle.height);
                    r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height);
                    if(i%5 === 2){
                        r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height / 2);
                    } else {
                        r_ctx.lineTo(basicWidth / 2 + (i+1) * per_realWidth , rulerEle.height / 1.5);
                    }
                    r_ctx.lineWidth = 2;
                    r_ctx.strokeStyle = '#d4d5d6';
                    r_ctx.stroke();
                    r_ctx.closePath();
                }
            }



            function layerInfo(str){
                layer.open({
                    skin : 'msg',
                    content : str,
                    time : 2
                })
            }


        })
    </script>
</body>
</html>